<template>
  <div class="progress-container">
    <!-- <span v-text="`${styleObject.width<options.limit}`"></span> -->
    <div class="lenght" :style="`width:${styleObject.width}%`"><span  v-text="_value"></span></div>
    <div class="value" v-if="styleObject.width<options.rightLimt" v-text="`已抢购${parseInt(this.options.tartetWidth)||0}%`"></div>
  </div>
</template>
<script>
export default {
  name: "Progress",
  props: {
    options: {
      type: Object,
      default() {
        return {
          tartetWidth: 0,
          maxWidth: 100,
          endLimit: 70,
          rightLimt:30,
          transfiniteText:'即将售罄'
        };
      }
    }
  },
  data() {
    return {
      styleObject: {
        width: 0,
        timeId: ""
      }
    };
  },
  computed:{
    _value(){
      let {rightLimt,endLimit,transfiniteText} = this.options
      let width = this.styleObject.width
      if(width>endLimit){
        return transfiniteText
      }else if(width>rightLimt){
        return `已抢购${width}%`
      }else{
        return ''
      }

    }
  },
  methods: {
    _play() {
      let tartetWidth = this.options.tartetWidth;
      this.styleObject.timeId = setInterval(() => {
        console.log('this.styleObject.tartetWidth', tartetWidth,this.styleObject.width)
        this.styleObject.width += 8;

        if (tartetWidth <= this.styleObject.width) {
          clearInterval(this.styleObject.timeId);
          this.styleObject.width = tartetWidth;
        }
      }, 50);
    }
  },
  watch: {
    options: {
      handler(val) {
        console.log(val, "val----------------------------");
        clearInterval(this.styleObject.timeId);
        this._play();
      },
      deep: true,
      // immediate: true
    }
  }
};
</script>
style.<style lang="scss">
.progress-container {
  width: 100%;
  height: 100%;
  background-color: #ffecb7;
  border-radius: 20px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  padding-left:2px;
  .lenght {
    width: 30%;
    height: calc(100% - 4px);
    background-image: linear-gradient(
        168deg,
        #f2706f 2%,
        #ed5756 31%,
        #f14a49 53%,
        #f53c3b 70%,
        #e30100 100%
      ),
      linear-gradient(#e34342, #e34342);
    background-blend-mode: normal, normal;
    border-radius: 20px;
    text-align: right;
    line-height: 46px;
    color: #d3ab7b;
    padding-right: 20px;
    box-sizing: border-box;
  }
  > .value {
    position: absolute;
    right: 20px;
    top: 0px;
    height: 46px;
    line-height: 46px;
    font-size: 28px;
    color: #e34342;
  }
}
</style>


